// 客服话术
import React, {useEffect, useRef, useState} from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import {Menu, Button, message} from 'antd';
import ProTable from '@ant-design/pro-table';
import {getCustomerServiceIdeas, getFeedbackCategory, serviceIdeasEdit} from "@/services/ant-design-pro/customerService";
import {ServiceIdeasDelete} from "@/services/ant-design-pro/customerService";
import EditorialScript from "@/pages/customerService/Speechcraft/components/EditorialScript";
import AddScript from "@/pages/customerService/Speechcraft/components/AddScript";
import AddCategory from "@/pages/customerService/Speechcraft/components/AddCategory";


const Idea = () => {

  const [key, setKey] = useState('all');
  const [recordItem, setRecordItem] = useState('all');
  const [isShowModal, setIsShowModal] = useState(false);
  const [isShowCategoryModal, setIsShowCategoryModal] = useState(false);
  const [menuAll, setMenu] = useState([]);
  // 使用 ref
  const ref = useRef()

  // 发送请求
  useEffect(async ()=>{
    // const dataAll =await getCustomerServiceIdeas()
    // console.log(11111,dataAll);
    const meus =await getFeedbackCategory()
    setMenu(meus)
    console.log('3333',meus);
  },[])


  // 定义 删除话术 请求函数
  const deleteIdea = async (record)=>{
    await ServiceIdeasDelete(record.id)
    message.success(`删除话术${record.title}成功`);
    ref.current?.reload();
  }
  // 定义 编辑话术 请求的函数
  const editScript = async (values)=>{
    await serviceIdeasEdit(values)
  }
  // 定义改变 isShowMadal 的函数
  const changeMadal = async ()=>{
    await setIsShowModal(!isShowModal)
  }
  // 定义点击编辑时的函数
  const editClick = (record)=>{
    setRecordItem(record)
    setIsShowModal(!isShowModal)
  }

  // 定义表头字段
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      // valueType: 'index',
      width: 80,
    },
    {
      title: '详情',
      key: 'content',
      dataIndex: 'content',
    },
    {
      title: '排序',
      key:'sort',
      dataIndex: 'sort',
      width:150

    },
    {
      title: '添加时间',
      key:'addtime',
      dataIndex: 'created_at',
      width:150
    },
    {
      title: '操作',
      align:'center',
      valueType: 'option',
      fixed: 'right',
      key: 'option',
      render: (_,record) => [
        <a key='link1' onClick={ ()=>{editClick(record)} }>编辑</a>,
        <a key="link2" onClick={ ()=>{deleteIdea(record)} }> 删除 </a>,
      ],
    },
  ];

  return (
    <div>
      <PageContainer header={{breadcrumb: {}}}>
        <ProTable
          actionRef={ref}
          columns={columns}
          rowKey="key"
          pagination={{
            showSizeChanger: true,
          }}
          tableRender={(_, dom) => (
            <div
              style={{
                display: 'flex',
                width: '100%',
              }}
            >
              <Menu
                onSelect={(e) => {
                    console.log(e.key)
                    // return  setKey(e.key as string)
                  setKey(e.key)
                  }
                }
                style={{ width: 180 }}
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                mode="inline"
              >
                <Menu.Item key='all'>全部</Menu.Item>
                {
                  menuAll.map((item,index)=>{
                    return <Menu.Item key={item.id}>{item.nickname}</Menu.Item>
                  })
                }
                {/*<Menu.SubMenu*/}
                {/*  key="sub1"*/}
                {/*  title={*/}
                {/*    <span>分类</span>*/}
                {/*  }*/}
                {/*>*/}
                  {/*<Menu.ItemGroup key="g1" title="Item 1">*/}
                  {/*  <Menu.Item key="1">Option 1</Menu.Item>*/}
                  {/*  <Menu.Item key="2">Option 2</Menu.Item>*/}
                  {/*</Menu.ItemGroup>*/}
                  {/*<Menu.ItemGroup key="g2" title="Item 2">*/}
                  {/*  <Menu.Item key="3">Option 3</Menu.Item>*/}
                  {/*  <Menu.Item key="4">Option 4</Menu.Item>*/}
                  {/*</Menu.ItemGroup>*/}
                {/*</Menu.SubMenu>*/}
              </Menu>
              <div
                style={{
                  flex: 1,
                }}
              >
                {dom}
              </div>
            </div>
          )}
          params={{
            key,
          }}
          request={async () => {
            const tableListDataSource1 =await getCustomerServiceIdeas(key)
            // console.log('6666',tableListDataSource1);
            return {
              success: true,
              data: tableListDataSource1.data
            };
          }}
          options={false}
          search={false}
          dateFormatter="string"
          headerTitle={
            <div>
              <div style={{display:'inline-block'}}>
                <AddScript />
              </div>
              <div style={{display:'inline-block',marginLeft:'10px'}}>
                <Button onClick={()=>{setIsShowCategoryModal(!isShowCategoryModal)}}>+添加分类</Button>
              </div>
            </div>}
        />
      </PageContainer>
      {/*编辑话术的 modal 弹框*/}
      {
        isShowModal ?
          <EditorialScript isShowModal={isShowModal} changeMadal={changeMadal} record={recordItem} editScript={editScript} menuAll={menuAll}/>
          : null
      }
      {/*添加分类的 modal 弹框*/}
      {
        isShowCategoryModal ?
        <AddCategory isShowCategoryModal={isShowCategoryModal} setIsShowCategoryModal={setIsShowCategoryModal} />
          : null
      }
    </div>
  );
};

export default Idea;
